<%-- 
    Document   : game
    Created on : 15-Feb-2012, 19:35:58
    Author     : Pierre Buvé & Nicolas Van Damme
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel=stylesheet type="text/css" href="css/main.css"/>
        <link rel="stylesheet" href="css/jquery.ui.all.css"/>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 

        <script>
            /**
             * Création du tableau pour la réponse et de la variable time.
             */
            var prop = new Array(new String("empty"),new String("empty"),new String("empty"),new String("empty"),new String("Time"));
            var time = 0;
            

            $(function(){
                /**
                 * Défini les éléments "Pcouleur" comme draggable sans retour, avec un clone du helper en opacitée 0.7 comme illustration et sans scroll possible pendant le drag.
                 */
                
                $(".Prouge").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
                $(".Pvert").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
                $(".Pbleu").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
                $(".Pmauve").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
                $(".Porange").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
                $(".Pjaune").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
                $(".Pnoir").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
                $(".Pblanc").draggable({revert:false,helper:"clone",opacity:0.7, scroll: false});
           
           
                /**
                 * Défini les éléments de la classe ".currentempty" comm droppable en cas de drop/
                 * on switch la class de l'élément dropper avec l'élément de récéption.
                 * On recupère la valeur de l'élément dropper (on ne garde que la couleur , on retire le "P" de la couleur et les classe Jquery.
                 * on cache l'élément dropper. 
                 */
                $(".currentempty").droppable({
                    drop:function(event, ui){
                        
                        $(this).switchClass(this,ui.draggable.attr("class").substring(0,ui.draggable.attr("class").indexOf(" ",0)),0);
                        
                        prop[$(".currentempty").index($(this))] = ui.draggable.attr("class").substring(1,ui.draggable.attr("class").indexOf(" ",0));
                        ui.draggable.hide();
                    }
                });
                
                /**
                 * Défini un listener sur la ligne courante en cas de double click.
                 * si il y a double clic sur la ligne:
                 * réaffiche la proposition de couleur
                 * change la valeur dans le tableau pour new String.
                 * Change la classe de l'élément double cliquer en ".currentempty"
                 */
                $("#line<c:out value="${datamodel.currentline}"/> td").dblclick(
                function(){
                    $(".P"+prop[$(".currentempty").index($(this))]).show(1000);
                    prop[$(".currentempty").index($(this))] = new String("empty");
                    $(this).removeClass();
                    $(this).addClass("currentempty",0);
                });
                $(".currentempty").dblclick();
            });

/**
 * Losque la page est charger :
 * cache la solution et initialise le bouton "tricher"
 */

            $(document).ready(function(){
               
                $("#solution").hide();
                var ishide = true;
                $( "#tricher").button();
                $( "#tricher" ).click(function() { 
                    if(ishide){
                        $("#solution").show(3000);
                        ishide=false;}
                    else{
                        $("#solution").hide(3000);
                        ishide=true;  
                    }
                });
                
                /**
                 * Initialisation du chrono.
                 */
                
                var start = 0;
                var end = 0;
                var diff = 0;
                var reset = false;
                var timerID = 0;

                function chrono(){
                    end = new Date();
                    diff = end - start;
                    diff = new Date(diff);
                    var msec = diff.getMilliseconds();
                    var sec = diff.getSeconds();
                    var min = diff.getMinutes();
                    var hr = diff.getHours()-1;
         
                    if(msec < 10){
                        msec = "00" +msec;
                    }
                    else if(msec < 100){
                        msec = "0" +msec;
                    }
                    if (sec < 10){
                        sec = "0" + sec;
                    }
                    if (min < 10){
                        min = "0" + min;
                    }
                    if (hr < 10){
                        hr = "0" + hr;
                    }
                    time = (diff.getSeconds()+(diff.getMinutes()*60)+(60*(diff.getHours()*60))-3600);
                    $("#timer").html(hr+":"+min+":"+sec);
                }
         
                /**
                 * fonction Start du chrono: lance le chrono.
                 */
                function Start(){
                    $(".tog").toggle();
                    if (reset) start = new Date();
                    else{
                        diff = new Date(<c:out value="${datamodel.duration*1000}"/>);
                        start = new Date()-diff
                        start = new Date(start)
                    }
                    timerID = setInterval(chrono, 10);
                }

                /**
                 * fonction Stop du chrono: arrète le chrono.
                 */
                function Stop(){
                    $(".tog").toggle();
                    clearTimeout(timerID);
                }
                
                /**
                 * fonction victory: vérifie si le statut de la partie est "Defeat" ou "VICTORY" pour affiher le dialog de victoire ou de défaite.
                 */
                function Victory(){
                              
                    if("<c:out value="${datamodel.status}" />"=="DEFEAT"){
                        Stop();  
                        $.fx.speeds._default = 1000;
                        $( "#dialog p" ).text("Défaite...");
                        $( "#dialog img" ).attr('src','images/defeat.gif');
                        $( "#dialog img" ).attr('alt','defeat');
                        $( "#dialog" ).dialog({
                            modal: true,
                            closeText:"x",
                            title:"Défaite",
                            draggable: false,
                            resizable:false,
                            autoOpen: false,
                            show: "Slide",
                            hide: "Drop"
                        });
                        $( "#dialog" ).dialog( "open" );
                        $("#solution td").show();
                        $( "#submit").attr('disabled', 'disabled');
                        $("#solution").show(3000);
                        ishide=false;
                    }
                    else if("<c:out value="${datamodel.status}" />"=="VICTORY"){
                        Stop();
                        $.fx.speeds._default = 1000;
                        $( "#dialog p" ).text("Victoire...");
                        $( "#dialog img" ).attr('src','images/victory.gif');
                        $( "#dialog img" ).attr('alt','victory');
                        $( "#dialog" ).dialog({
                            modal: true,
                            closeText:"x",
                            title:"Victoire",
                            draggable: false,
                            resizable:false,
                            autoOpen: false,
                            show: "Slide",
                            hide: "Drop"
                        });
                        $( "#dialog" ).dialog( "open" );
                        $("#solution td").show();
                        $( "#submit").attr('disabled', 'disabled');
                        $("#solution").show(3000);
                        ishide=false;
                    }
                    else{
                        Start();
                    }
                }
                
                /**
                 * Initialisation de bouton "envoyer":
                 * stop le chrono et enregistre le temps,
                 * rajoute les valeurs dans les champs caché du formulaire.
                 */
                
                $( "#submit").button();
                $( "#submit" ).click(function() { 
                    Stop();
                    prop[4] = time;
                    $("#token01").val(prop[0].toString()); 
                    $("#token02").val(prop[1].toString());
                    $("#token03").val(prop[2].toString());
                    $("#token04").val(prop[3].toString());
                    $("#time").val(prop[4].toString());
                });
                
                /**
                 * Initialisation du bouton aide:
                 * ouvre un Dialog avec les règles du jeu.
                 */
                 $("#aide").button();
                 $("#aide").click(function() {
                        $.fx.speeds._default = 1000;
                        $( "#dialog p" ).html("<b><u>Mastermind</u></b><p>Le but du Mastermind est de deviner quelles sont les couleurs choisies par l'ordinateur</p><p>Pour jouer, lancez une nouvelle partie sans identification, ou en vous identifiant.</p><p>Ensuite, il suffit de faire glisser les pions disponibles en bas à droite</p><p>Le double-clic sur la ligne courrante clic vous permet d'effacer un pion</p><p>Une fois votre ligne terminée, cliquez sur le bouton 'Envoyer' pour voir la correction, qui sera faite pour chaque pion.</p><ul><li>Un pion noir signifie qu'un pion se situe dans la séquence, mais n'est pas placé au bon endroit.</li><li>Un pion blanc signifie qu'un pion se situe au bon endroit.</li></ul><p>Pour gagner la partie, il faut trouver la séquence générée par l'ordinateur en 10 essais maximum.</p><p>Bon jeu !</p>");
                        $( "#dialog" ).dialog({
                            modal: true,
                            width:600,
                            closeText:"x",
                            title:"Help",
                            draggable: false,
                            resizable:false,
                            autoOpen: false,
                            show: "Slide",
                            hide: "Drop"
                        });
                        $( "#dialog" ).dialog( "open" );    
                 });
                 
                 
                Victory();
  
            });
         
        </script>
        <title>DNET-Mastermind - Plateau de Jeu</title>
    </head>
    <body>
        <%@include file="/WEB-INF/jsp/header.jsp" %>
        <c:if test="${not empty decobutton}">
            <div id="session"><form name="unlogbutton" method="POST" action="index.htm">
                    <input name="loadgame" type="submit" value ="<c:out value="${decobutton}" />"/>
                </form></div>
            </c:if>
        <h2>Page de jeu</h2>
        <input type="submit" style="float:right;" id="aide" value="Aide" />
        <a href="login.htm">Retour au Dashboard</a>
    <center> 
        <table border="1" class="tablegame" >
            <tr>
                <td height="130" colspan="8" align="center"> 
                    <table border="1" style="width:220px">
                        <tr id="solution">
                            <c:forEach items="${datamodel.solution}" var="solution">
                                <td height="50" width="50" class="${solution.color}"></td>
                            </c:forEach>
                        </tr>
                        <tr>
                            <td colspan="4" align="center">
                                <input type="submit" id="tricher" value="Tricher"> 
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="250" rowspan="7" align="center">

                    <div align="center" ><font size="10"><b>Tour <c:out value="${datamodel.currentline}" /></font></b></div>


                    <table border="1">
                        <tr>
                            <td width="220" height="100" align="center">
                                <H3>Temps de Jeu</H3>
                                <span id="timer">00:00:00</span>
                            </td>
                        </tr> 
                    </table>


                </td>
            </tr>
            <% int l = 0;%>
            <tr id="line10">
                <% l = 0;%>
                <c:forEach items="${datamodel.line10}" var="line10">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line10.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line10.color}"></td>
                    <% }%>
                </c:forEach>
                <% l = 0;%>
            </tr>
            <tr id="line9">
                <% l = 0;%>
                <c:forEach items="${datamodel.line09}" var="line09">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line09.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line09.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
            <tr id="line8">
                <% l = 0;%>
                <c:forEach items="${datamodel.line08}" var="line08">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line08.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line08.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
            <tr id="line7">
                <% l = 0;%>
                <c:forEach items="${datamodel.line07}" var="line07">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line07.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line07.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
            <tr id="line6">
                <% l = 0;%>
                <c:forEach items="${datamodel.line06}" var="line06">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line06.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line06.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
            <tr id="line5">
                <% l = 0;%>
                <c:forEach items="${datamodel.line05}" var="line05">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line05.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line05.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
            <tr id="line4">
                <% l = 0;%>
                <c:forEach items="${datamodel.line04}" var="line04">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line04.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line04.color}"></td>
                    <% }%>
                </c:forEach>
                <td rowspan="4" align="center">
                    <table border="1">
                        <tr style="width:220px;height:50px;" >
                            <% int j = 0;%>
                            <c:forEach items="${datamodel.alltokenslist}" var="alltokens">
                                <% j++;
                                    if (j == 5) {%>
                            </tr>
                            <tr style="width:220px;height:50px;">
                                <% }%>
                                <td style="width:50px;height:50px;" class="P${alltokens.color}"></td>
                            </c:forEach>
                        </tr>
                        <tr style="width:220px;height:50px;">
                            <td colspan="4" align="center">
                                <form name="lineform" method="POST" action="game.htm">
                                    <input type="hidden" name="token01" id="token01" value="?"/>
                                    <input type="hidden" name="token02" id="token02" value="?"/>
                                    <input type="hidden" name="token03" id="token03" value="?"/>
                                    <input type="hidden" name="token04" id="token04" value="?"/>
                                    <input type="hidden" name="duration" id="time" value="0"/>
                                    <input type="hidden" name="currentline" value="<c:out value="${datamodel.currentline}" />"/>
                                    <input type="hidden" name="gameid" value="<c:out value="${datamodel.gameid}" />"/>

                                    <input name="validline" type="submit" id="submit"/>

                                </form> 
                            </td>
                        </tr>
                    </table>
                </td>             
            </tr>
            <tr id="line3">
                <% l = 0;%>
                <c:forEach items="${datamodel.line03}" var="line03">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line03.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line03.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
            <tr id="line2">
                <% l = 0;%>
                <c:forEach items="${datamodel.line02}" var="line02">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line02.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line02.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
            <tr id="line1">
                <% l = 0;%>
                <c:forEach items="${datamodel.line01}" var="line01">    
                    <% l++;
                        if (l > 4) {%>
                    <td height="50" width="25" class="${line01.color}"></td>
                    <% } else {%>
                    <td height="50" width="50" class="${line01.color}"></td>
                    <% }%>
                </c:forEach>
            </tr>
        </table>
    </center>

    <div id="dialog" style="width: 500px;" class="window" title="">
        <p></p>
        <img src="" alt="" />
    </div>

    <script>
        /**
         * défini la ligne courrante.
         */
        $("#line<c:out value="${datamodel.currentline}"/> .empty").switchClass("empty","currentempty", 0);
    </script>
</body>
</html>
